<template>
    <div class="index-box">
        <div class="class-box">
            <div class="tabs">
                <div class="tab-item" :class="{ active : tabItem == 0 }" @click="tabClick(0)">课程详情</div>
                <div class="tab-item" :class="{ active : tabItem == 1 }" @click="tabClick(1)">课程图谱</div>
                <div class="tab-item" :class="{ active : tabItem == 2 }" @click="tabClick(2)">备课</div>
                <div class="tab-item" :class="{ active : tabItem == 3 }" @click="tabClick(3)">教材</div>
                <div class="tab-item" :class="{ active : tabItem == 4 }" @click="tabClick(4)">课程作业</div>
            </div>
            <ClassDetail v-if="tabItem == 0" :id="id"/>
            <OutlineView v-if="tabItem == 1" :id="id"/>
            <PreparationView v-if="tabItem == 2" :id="id"/>
            <TextbookView v-if="tabItem == 3" :id="id"/>
            <HomeWork v-if="tabItem == 4" :id="id"/>
        </div>
    </div>
</template>
<script setup>
    import ClassDetail from '@/components/teacher/ClassDetail.vue'
    import OutlineView from '@/components/teacher/OutlineView.vue'
    import PreparationView from '@/components/teacher/PreparationView.vue'
    import TextbookView from '@/components/teacher/TextbookView.vue'
    import HomeWork from '@/components/teacher/HomeWork.vue'
    import { ref } from 'vue'
    import { useRoute } from 'vue-router';
    const route = useRoute();
    const id = ref(route.query.id)
    const tabItem = ref(0)
    const tabClick = (index) => {
        tabItem.value = index
    }
</script>
<style scoped>
    :deep(.el-button--primary){background: #1465E1;border: 1px solid #1465E1;}
    .index-box{position: relative;}
    .class-box{padding-bottom: 30px;border-radius: 8px;}
    .tabs{display: flex;flex-direction: row;justify-content: start;gap: 5px;}
    .tabs .tab-item{background: #fff;width: 100px;text-align: center;height: 35px;line-height: 35px;border-top-left-radius: 10px;border-top-right-radius: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;cursor: pointer;}
    .tab-item.active{background: #1465E1;color: #fff;}
</style>